<template>
  <KView class="coupon-tao-item">
    <KView class="coupon-tao-item-img">
      <sys-image :src="coupon.pic" mode="auto" :radius="8"></sys-image>
    </KView>
    <KView class="coupon-tao-item-content">
      <KView class="coupon-tao-item-title">{{coupon.title}}</KView>
      <KView class="coupon-tao-item-price">原价：¥{{coupon.price}}</KView>
      <KView class="coupon-tao-item-footer clearfix">
        <KView class="coupon-tao-item-couponPrice clearfix">
          <KView class="coupon-tao-item-couponPric-label">券后价：</KView>
          <KView class="coupon-tao-item-couponPrice-div">
            <KView class="coupon-tao-item-couponPrice-unit">¥</KView>
            <KView class="coupon-tao-item-couponPrice-value">{{coupon.couponPrice}}</KView>
          </KView>
        </KView>
        <KView class="coupon-tao-item-btn" @click="collectCoupon">
          <span>领券</span>
          <span>&gt;</span>
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysImage from 'common/sysImage';

  export default {
    props: {
      coupon: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      collectCoupon() {
        this.$emit('collect-coupon', this.coupon);
      }
    },

    components: {
      SysImage
    }
  };

</script>

<style lang="scss">
  .coupon-tao-item {
    height: formatPx(170);

    >div {
      float: left;
      height: 100%;
    }

    .coupon-tao-item-img {
      width: formatPx(170);
      margin-right: formatPx(20);
    }

    .coupon-tao-item-content {
      width: calc(100% - #{formatPx(190)});

      .coupon-tao-item-title {
        font-size: formatPx(26);
        line-height: formatPx(30);
        color: #2f3135;
        display: box;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: formatPx(60);
        overflow: hidden;
        margin-bottom: formatPx(10);
      }

      .coupon-tao-item-price {
        text-decoration: line-through;
        color: #b3b9c2;
        font-size: formatPx(24);
        line-height: formatPx(34);
        margin-bottom: formatPx(10);
      }

      .coupon-tao-item-footer {
        height: formatPx(50);

        .coupon-tao-item-couponPrice {
          float: left;

          .coupon-tao-item-couponPric-label {
            float: left;
            color: #b3b9c2;
            font-size: formatPx(24);
            line-height: formatPx(60);
            height: 100%;
          }

          .coupon-tao-item-couponPrice-div {
            float: left;
            height: 100%;
            color: #ff641f;

            >div {
              float: left;
            }

            .coupon-tao-item-couponPrice-unit {
              line-height: formatPx(60);
              font-size: formatPx(32);
            }

            .coupon-tao-item-couponPrice-value {
              line-height: formatPx(54);
              font-size: formatPx(40);
              margin-left: formatPx(6);
            }
          }
        }

        .coupon-tao-item-btn {
          float: right;
          border-radius: 4px;
          width: formatPx(125);
          height: formatPx(50);
          line-height: formatPx(50);
          color: #ffffff;
          background: #59c264;
          text-align: center;
          font-size: formatPx(26);

          span+span {
            margin-left: formatPx(10);
          }
        }
      }
    }
  }

</style>
